// 入口文件
import Vue from 'vue'
// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 安装路由
Vue.use(VueRouter)

// 导入格式化时间的插件
import moment from 'moment'
// 定义全局的过滤器
Vue.filter('dateFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") {
    return moment(dataStr).format(pattern)
})

// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource
Vue.use(VueResource)
// 设置请求的根路径
Vue.http.options.root = 'http://www.liulongbin.top:3005/api';
// 全局设置 post 时候表单数据格式组织形式   application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true;


// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'
// 导入扩展图标样式
import './lib/mui/css/icons-extra.css'


// 按需导入 Mint-UI 中的组件   
/* import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
Vue.component(Header.name, Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Button.name, Button)
Vue.use(Lazyload); */
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css';
//引入缩略图样式
import './css/thumbnail.scss';

//安装图片预览插件
import VuePreview from 'vue-preview';
/* Vue.use(VuePreview, {
    mainClass: 'pswp--minimal--dark',
    barsSize: { top: 0, bottom: 0 },
    captionEl: false,
    fullscreenEl: false,
    shareEl: false,
    bgOpacity: 0.85,
    tapToClose: true,
    tapToToggleControls: false
}) */
Vue.use(VuePreview);


// 安装 图片预览插件
/* import VuePreview from 'vue-preview'
Vue.use(VuePreview) */


// 1.3 导入自己的 router.js 路由模块
import router from './router.js';


// 导入 App 根组件
import app from './App.vue';
//注册vuex
import Vuex from 'vuex';
Vue.use(Vuex);
//实例化一个仓库

//每次刚进入网站，昆丁会调用main.js在刚调用的时候，先从本地存储中把购物车的数据读出来
var car = JSON.parse(localStorage.getItem('car') || '[]');
var store = new Vuex.Store({
    //调用方法：this.$store.state.***
    state:{
        /*
            将购物车中商品的数据存在一个数组里面，存储每一个商品的对象
            {
                id:商品的id,
                count:购买的数量,
                price:商品的单价
                selected:fasle 在购物车中是否被选中
            }
        */
        car: car
    },
    //调用方法：this.$store.commit('方法名','按需传递的参数')
    mutations:{
        addToCar(state,goodsinfo){
            /* 
                点击加入购物车，把商品保存到store中的car上
                注意：
                1. 如果购物车中，之前就已经有这个对应的商品了，那么，只需要更新数量
                2. 如果没有，则直接把 商品数据，push 到 car 中即可
            */
           //假设在购物车中咩有找到对应的商品
           var flag = false;
           state.car.some( item => {
               if(item.id === goodsinfo.id){
                    item.count += parseInt(goodsinfo.count);
                    flag = true;
                    return true;
               }
           });
           // 如果最终，循环完毕，得到的 flag 还是 false，则把商品数据直接 push 到 购物车中
           if(!flag){
                state.car.push(goodsinfo);
           }

            // 当 更新 car 之后，把 car 数组，存储到 本地的 localStorage 中
            localStorage.setItem('car',JSON.stringify(state.car));
        },
        updateGoodsInfo(state,goodsinfo){
            //修改购物车中商品的数量值
            state.car.some(item => {
                if(item.id == goodsinfo.id){
                    item.count = parseInt(goodsinfo.count);
                    return true;
                }
            })
            //当修改完商品的数量之后，把最新的数据保存到本地存储中
            localStorage.setItem('car', JSON.stringify(state.car));
            console.log(JSON.stringify(goodsinfo));
        },
        removeFromCar(state,id){
            //根据ID从store中删除对应的那条商品数据
            state.car.somes((item,i) => {
                if(item.id == id){
                    state.car.splice(i,1);
                    return true;
                }
            })
            //将删除完的最新的数据保存在本地
            localStorage.setItem('car', JSON.stringify(state.car));
        },
        updateGoodsSlected(state,info){
            state.car.some(item => {
                if(item.id === info.id){
                    item.selected = info.selected;
                }
            })
            
            //把最新的数据保存到本地存储中
            localStorage.setItem('car', JSON.stringify(state.car));
        }
    },
    //调用方法：this.$store.getters.***
    getters:{
        getAllCount(state){
            var c = 0;
            state.car.forEach(item => {
                c += item.count;
            })
            return c;
        },
        getGoodsCount(state){
            var o ={};
            state.car.forEach(item => {
                o[item.id] = item.count;
            })
            return o;
        },
        getGoodSelected(state) {
            var o = {};
            state.car.forEach(item => {
                o[item.id] = item.selected;
            });
            return o;
        },
        getGoodsCountAndAmount(state){
            var o = {
                count:0,  //勾选的数量
                amount:0  //勾选的总价
            }
            state.car.forEach(item => {
                if(item.selected){
                    o.count += item.count;  //数量累加
                    o.amount += item.price * item.count;
                }
            })

            return o;
        }
    }
});

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router, // 1.4 挂载路由对象到 VM 实例上
    store //挂载到vm实例上
})